<template>
  <div class="h5-form" style="padding: 20px">
    <el-form
      size="large"
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-position="top"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入电话号码" />
      </el-form-item>
      <el-form-item label="问题描述" :rows="2" type="textarea" prop="content">
        <el-input v-model="ruleForm.content" :rows="4" type="textarea" placeholder="请输入问题描述" />
      </el-form-item>
      <template v-for="(item, index) in ruleForm.realAddressInfoList" :key="index">
        <el-form-item label="户号">
          <el-input style="width: 80%" v-model="item.consumerNumber" placeholder="请输入户号" />
          <el-icon
            style="margin-left: 5px"
            v-if="ruleForm.realAddressInfoList.length > 1"
            size="22"
            @click="removeDomain(item)"
            ><CircleClose
          /></el-icon>
          <el-icon style="margin-left: 5px" size="22" @click="addDomain()"><CirclePlus /></el-icon>
        </el-form-item>
        <el-form-item label="详细家庭住址" :rows="2" type="textarea">
          <el-input
            style="width: 80%"
            v-model="item.address"
            :rows="2"
            type="textarea"
            placeholder="请输入详细家庭住址"
          />
        </el-form-item>
      </template>
      <!--  <el-form-item>
        <el-button type="primary" block :loading="loading" @click="addDomain()">+新增户号\家庭地址</el-button>
      </el-form-item> -->
      <!-- <el-form-item label="户号" :rows="2" type="textarea" prop="address">
        <el-input v-model="ruleForm.consumerNumber" placeholder="请输入用电户号，多个用、隔开" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item label="详细家庭住址" :rows="2" type="textarea" prop="address">
        <el-input v-model="ruleForm.address" :rows="2" type="textarea"  placeholder="请输入详细家庭住址，多个用；隔开" />
      </el-form-item> -->
      <el-form-item>
        <el-button style="width: 100%" type="primary" block :loading="loading" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, watch, reactive } from 'vue';
import { useRoute } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus';
import { h5Service } from '@/api/h5';
import { ElMessage, ElMessageBox } from 'element-plus';
const wxUserId = useRoute().query.wxUserId;
const type = useRoute().query.type;
const wxRobotId = useRoute().query.rid || useRoute().query.rId;
const ruleForm = reactive({
  wxUserId: wxUserId,
  phone: '',
  userName: '',
  address: '',
  content: '',
  consumerNumber: '',
  type: type,
  realAddressInfoList: [{ consumerNumber: '', address: '', communityId: '' }],
  wxRobotId: wxRobotId,
});
const rules = reactive({
  phone: [
    { required: true, message: '请输入联系方式', trigger: 'change' },
    {
      trigger: 'blur',
      pattern: /^1[3,4,5,6,7,8,9]\d{9}$/,
      message: '请输入正确的手机号码',
    },
  ],
  /*  userName: [{ required: true, message: '请输入姓名', trigger: 'change' }], */
  content: [{ required: true, message: '请输入问题描述', trigger: 'change' }],
});
const ruleFormRef = ref<FormInstance>();
const loading = ref(false);
const addDomain = () => {
  ruleForm.realAddressInfoList.push({ consumerNumber: '', address: '', communityId: '' });
};
const removeDomain = (item) => {
  ElMessageBox.confirm(`确定要删除吗`, '确认提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const index = ruleForm.realAddressInfoList.indexOf(item);
      if (index !== -1) {
        ruleForm.realAddressInfoList.splice(index, 1);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const submitForm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      h5Service.createWorkOrder({ data: ruleForm }).then((res) => {
        if (res.success)
          ElMessage({
            message: '操作成功',
            type: 'success',
          });
        else {
          ElMessage({
            message: res.description,
            type: 'error',
          });
        }
      });
    } else {
    }
  });
};
</script>
<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: end;
  padding: 10px;
}
</style>
